﻿<!--@时间：2022-3-17
    @描述：控件-列表框
    @使用：
        import ListBox from "@/components/common/ListBox.vue"
属性如下：
list:数据列表
textKey:显示文本的栏位名称
valueKey:显示值的栏位名称
onChanged  function - changed事件
-->

<template>
<el-radio-group v-model="selectedValue" class="x-fillitem el-group-list" @change="doChanged" :disabled="disabled" :style="myStyle">
    <el-radio-button v-for="(item,index) in list" :key="index" :label="item[valueKey]">{{item[textKey]}}</el-radio-button>
</el-radio-group>
</template>
<script>
export default {
  components: {
  },
  props: ['list', 'textKey', 'valueKey', 'disabled', 'myStyle'],
  created () {
  },
  data () {
    return {
      selectedValue: ''
    }
  },
  computed: {
  },
  methods: {
    doChanged () {
      this.$emit('onChanged', this.selectedValue)
    }
  }
}
</script>
<style>
.el-group-list.el-radio-group{
  display: flex;
  flex-direction: column;
  align-items:stretch;
}
.el-group-list.el-radio-group .el-radio-button:first-child .el-radio-button__inner,
.el-group-list.el-radio-group .el-radio-button:last-child .el-radio-button__inner,
.el-group-list.el-radio-group  .el-radio-button:first-child .el-radio-button__inner,
.el-group-list.el-radio-group .el-radio-button__inner
{
  border-radius: 0px !important;
  border: none !important;
}
.el-group-list.el-radio-group .el-radio-button{
  border-bottom: 1px solid #F7F7F7 !important;
}
.el-group-list.el-radio-group{
  border: 1px solid #dcdfe6;
}
.el-group-list.el-radio-group > label > span{
  width: 100%;
  text-align: left;
  padding-left: 20px;
}
</style>
